<template>
  <el-container class="box">
    <el-aside>
      <Aside></Aside>
    </el-aside>
    <el-container>
      <el-header>
        <Header></Header>
      </el-header>
      <el-main>
        <!-- 4.在layout/index.vue中从vuex获取当前路由信息，展示到面包屑导航上 -->
        <el-breadcrumb separator="/" v-show="currentRoute.parentRouteTitle">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="">{{currentRoute.parentRouteTitle}}</a></el-breadcrumb-item>
          <el-breadcrumb-item>{{currentRoute.currentRouteTitle}}</el-breadcrumb-item>
        </el-breadcrumb>
        <br />
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Aside from './Aside.vue';
import Header from './Header.vue';
export default {
  computed:{
    currentRoute(){
      return this.$store.state.functions.currentRoute;
    }
  },
  components: { Aside, Header },
  watch:{
    //监听$route对象：如果当前页面是首页，则清除vuex中父子路由标题信息
    //目的：在首页中不显示面包屑导航
    $route(newValue){
      if(newValue.path=='/home'){
        this.$store.commit('functions/setCurrentRoute',{})
      }
    }
  },
  // created(){
  //   //1.查找当前动态路由是否存在
  //   let fns = this.$store.state.admin.admin.functions;
  //   if(fns.length==0){
  //     //2.如果不存在，则调用addRoute函数进行添加
  //     this.$store.dispatch('functions/addRoute');
  //   }
  // }
}
</script>

<style>
.el-menu {
  height: 100%;
}

.box {
  height: 100vh;
}

.el-header {
  color: #333;
  height: 80px !important;
  /* line-height: 100px; */
}

.el-aside {
  color: #333;
  line-height: 200px;
  width: 220px !important;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
}

body>.el-container {
  margin-bottom: 40px;
}
</style>